<template>
	<view class="container">
		<!-- 		<uv-navbar title="视频种草素材" @leftClick="leftClick" placeholder
			bgColor="radial-gradient(128% 128% at 95% 0%, #D7CEFF 50%, #BBE1FF 100%)"></uv-navbar> -->
		<uv-loading-page :loading="recommendList.loading" loading-mode="spinner"></uv-loading-page>
		<view v-if="!loading">
			<uv-waterfall ref="waterfall" v-model="recommendList.list" :add-time="10" :left-gap="leftGap"
				:right-gap="rightGap" :column-gap="columnGap" @changeList="changeList"
				v-if="recommendList.list.length > 0">
				<!-- 第一列数据 -->
				<template v-slot:list1>
					<!-- 为了磨平部分平台的BUG，必须套一层view -->
					<view>
						<view v-for="(item, index) in list1" :key="item.id" class="waterfall-item"
							@tap.stop.prevent="fb(item)">
							<view class="waterfall-item__image" :style="[imageStyle(item)]">
								<image :src="item.commentUrl[0]" mode="widthFix" :style="{width: '100%'}"></image>
							</view>
							<view class="waterfall-item__ft">
								<view class="waterfall-item__ft__desc uv-line-2">
									<text class="value">{{item.commentContent}}</text>
								</view>
							</view>
						</view>
					</view>
				</template>
				<!-- 第二列数据 -->
				<template v-slot:list2>
					<!-- 为了磨平部分平台的BUG，必须套一层view -->
					<view>
						<view v-for="(item, index) in list2" :key="item.id" class="waterfall-item"
							@tap.stop.prevent="fb(item)">
							<view class="waterfall-item__image" :style="[imageStyle(item)]">
								<image :src="item.commentUrl[0]" mode="widthFix" :style="{width:'100%'}"></image>
							</view>
							<view class="waterfall-item__ft">
								<view class="waterfall-item__ft__desc uv-line-2">
									<text class="value">{{item.commentContent}}</text>
								</view>
							</view>
						</view>
					</view>
				</template>
			</uv-waterfall>
			<view class="empty" v-else>
				<empty>暂无素材</empty>
			</view>
		</view>
		<uv-popup ref="popup" bgColor="none">
			<view class="pop-box-1">
				<image class="top-image"
					src="http://jy-nfc.oss-cn-hangzhou.aliyuncs.com/2024/12/26/5bd2f1da01a14b71b13296587d26825c.png"
					mode="aspectFill"></image>
				<view class="pop-box">
					<view class="title1">是否确认发布 </view>
					<view class="title2">视频/种草内容到{{text}}吗?</view>
					<view class="button" @tap.stop.prevent="submit">确定</view>
				</view>
			</view>
		</uv-popup>
		<uv-popup ref="video" bgColor="none">
			<view class="vido-box">
				<video id="myVideo" :src="videoSrc" @error="videoErrorCallback" autoplay
					:show-fullscreen-btn="false"></video>
			</view>
		</uv-popup>
		<!-- 加载更多组件 -->
		<!-- <uv-load-more v-if="recommendList.list.length > 5" :status="loadStatus"></uv-load-more> -->
	</view>
</template>
<script>
	import {
		guid
	} from '@/uni_modules/uv-ui-tools/libs/function/index.js'

	import {
		getCommentInfo
	} from '@/common/api.js'
	import {
		toast
	} from '@/utils/common'
	const app = getApp();
	export default {
		options: {
			styleIsolation: 'shared'
		}, //解决/deep/不生效**
		data() {
			return {
				// ...
				type: '',
				text: '',
				videoSrc: '',
				loadStatus: 'loadmore',
				recommendList: {
					list: [],
					hasMore: false,
					loading: false,
					page: 1
				},
				list: [], // 瀑布流全部数据
				list1: [], // 瀑布流第一列数据
				list2: [], // 瀑布流第二列数据
				leftGap: 12,
				rightGap: 12,
				columnGap: 10,
				loading: false,

			}
		},
		computed: {
			imageStyle(item) {
				return item => {
					const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
					const w = v / 2;
					const rate = w / item.w;
					const h = rate * item.h;
					return {
						width: w + 'px',
						height: h + 'px'
					}
				}
			}
		},
		async onLoad(e) {
			this.type = e.type
			this.text = e.type == 'meituan' ? '美团' : e.type == 'dianping' ? '大众点评' : e.type == 'gaode' ? '高德地图' : '微信'
			this.getData()
		},

		onPullDownRefresh: function() {
			this.recommendList.page = 1;
			this.recommendList.list = [];
			this.getData();
		},
		/**
		 * 触底
		 */
		onReachBottom() {
			if (this.recommendList.hasMore && !this.browseList.loading) {
				this.loadStatus = 'loading'
				this.getData().then((res) => {
					this.loadStatus = res.hasMore ? 'loadmore' : 'nomore'
				})
			}
		},
		methods: {
			leftClick() {
				app.navigationTo('pages/H5/index')
			},
			// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
			changeList(e) {
				this[e.name].push(e.value);
			},
			getData() {
				return new Promise((resolve, reject) => {
					this.recommendList.loading = true
					let params = {
						merchantId: app.globalData.merchantId,
						pageNo: this.recommendList.page,
						pageSize: 10
					};
					getCommentInfo(params).then((result) => {
						let total = result.total;
						let data = result.rows;
						data.forEach(item => {
							item.commentUrl = JSON.parse(item.commentUrl)
						});
						let {
							page,
							list,
							hasMore
						} = this.recommendList;
						list = [...list, ...data];
						if (page == 1) {
							hasMore = total > data.length;
						} else {
							hasMore = total > (page - 1) * 10 + data.length;
						}
						if (hasMore) {
							page++;
						} else {
							page = 1
						}
						resolve({
							data: data.length,
							hasMore
						});
						this.recommendList.page = page;
						this.recommendList.list = list;
						this.recommendList.loading = false;
					}).catch((err) => {
						this.recommendList.loading = false;
						reject();
					});
				});
			},
			fb(item) {
				// this.$refs.popup.open();
				app.navigationTo('pages/H5/material/details?id=' + item.id + '&type=' + this.type)
			},
			submit() {
				toast('敬请期待')
				this.$refs.popup.close();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		overflow: hidden;
		min-height: 100vh;
		width: 100vw;
		padding: 24rpx;
		box-sizing: border-box;
		background: radial-gradient(128% 128% at 95% 0%, #D7CEFF 0%, #BBE1FF 62%, #FFFFFF 95%);

		.waterfall-item {
			background: linear-gradient(180deg, #FFFFFF 64%, rgba(255, 255, 255, 0.62) 100%);
			border-radius: 16rpx;
			margin-bottom: 20rpx;

			image {
				border-radius: 16rpx;
			}

			.waterfall-item__ft {
				padding: 20rpx;
				box-sizing: border-box;

				.waterfall-item__ft__desc {
					display: -webkit-box;
					word-break: break-all;
					text-overflow: ellipsis;
					overflow: hidden;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}

			}
		}

		.pop-box-1 {
			position: relative;
			padding-top: 150rpx;

			.top-image {
				position: absolute;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 282rpx;
				height: 284rpx;
			}
		}

		.pop-box {
			width: 614rpx;
			height: 528rpx;
			background: #FFFFFF;
			border-radius: 80rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #000000;
			line-height: 80rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			flex-direction: column;
			padding-top: 160rpx;
			box-sizing: border-box;

			.title1 {
				margin-bottom: 20rpx;
			}

			.title2 {
				margin-bottom: 40rpx;
			}

			.button {
				width: 392rpx;
				height: 80rpx;
				background: linear-gradient(180deg, #886AE6 0%, #4635FF 99%);
				border-radius: 80rpx 80rpx 80rpx 80rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
			}
		}

		.vido-box {
			video {
				width: 100vw;
			}
		}

		/deep/ .uv-waterfall {
			justify-content: center
		}

		.waterfall-item__image {
			position: relative;

			.video {
				position: absolute;
				top: 28rpx;
				right: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 51rpx;
				height: 50rpx;
				background: rgba(216, 216, 216, 0.4);
				border-radius: 50%;
				padding-left: 4rpx;
				box-sizing: border-box;
			}
		}
	}
</style>